import React from 'react';
import ReactDOM from 'react-dom/client';
import { RouterProvider } from 'react-router-dom';
import { ConfigProvider } from 'antd';
import router from './router';
import './styles/global.less';

// 科技风格的主题配置
const theme = {
  token: {
    colorPrimary: '#00a8ff',
    colorSuccess: '#52f0b3',
    colorWarning: '#ffbe3d',
    colorError: '#ff7979',
    colorInfo: '#00c8ff',
    borderRadius: 4,
    colorBgContainer: 'rgba(10, 21, 41, 0.9)',
    colorBgElevated: 'rgba(10, 30, 50, 0.9)',
    colorBorder: 'rgba(0, 180, 255, 0.2)',
    colorBorderSecondary: 'rgba(0, 180, 255, 0.1)',
  },
  components: {
    Menu: {
      colorItemBg: 'transparent',
      colorItemText: '#a3daff',
      colorItemTextSelected: '#ffffff',
      colorItemBgSelected: 'rgba(0, 146, 255, 0.1)',
      colorItemTextHover: '#66cdff',
    },
    Button: {
      colorPrimaryHover: '#00c8ff',
      controlOutlineWidth: 0,
      colorBorder: 'rgba(0, 180, 255, 0.3)',
    },
    Table: {
      colorBgContainer: 'transparent',
      colorText: '#a3daff',
      colorTextHeading: '#ffffff',
      colorBorderSecondary: 'rgba(0, 180, 255, 0.1)',
    },
    Card: {
      colorBorderSecondary: 'rgba(0, 180, 255, 0.2)',
      colorBgContainer: 'rgba(10, 30, 50, 0.5)',
    },
    Input: {
      colorBgContainer: 'rgba(0, 30, 60, 0.3)',
      colorBorder: 'rgba(0, 180, 255, 0.2)',
      colorText: '#a3daff',
    },
    Select: {
      colorBgContainer: 'rgba(0, 30, 60, 0.3)',
      colorBorder: 'rgba(0, 180, 255, 0.2)',
      colorText: '#a3daff',
      colorTextPlaceholder: 'rgba(163, 218, 255, 0.5)',
      controlItemBgActive: 'rgba(0, 146, 255, 0.1)',
      colorTextQuaternary: '#66cdff',
    },
    Modal: {
      colorBgElevated: 'rgba(10, 25, 47, 0.9)',
      colorIcon: '#66cdff',
    },
  },
};

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <ConfigProvider theme={theme}>
      <RouterProvider router={router} />
    </ConfigProvider>
  </React.StrictMode>,
);
